<template>
  <div class="all_into_page">

    <!-- 搜索区域 开始 -->
    <div class="search_box">
      <el-form :model="searchForm" :inline="true" size="small">
        <el-form-item label="姓名：">
          <el-input v-model="searchForm.name"></el-input>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="城市：">
          <el-input v-model="searchForm.mobile"></el-input>
        </el-form-item>
        <el-form-item label="前端顾问：">
          <el-input v-model="searchForm.employeeName"></el-input>
        </el-form-item>
        <el-form-item label="查询日期：">
          <el-date-picker v-model="searchForm.searchTime" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 搜索区域 end -->

    <!-- 列表区域 开始 -->
    <!-- <div class="show_tips">查询日期内：签约客户XXXX人，合同金额XXX元，已收款XXXX元，剩余收款xxxx元</div> -->
    <div class="">
      <el-table class="el_table" :data="dataList" border>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="电话" prop="mobile"></el-table-column>
        <el-table-column label="城市" prop="city"></el-table-column>
        <el-table-column label="性别" prop="sex">
          <template slot-scope="{row}">{{SEXTYPELIST[row.sex]}}</template>
        </el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="前端顾问" prop="employeeName"></el-table-column>
        <el-table-column label="状态" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.contractStatus:''}}</template>
        </el-table-column>
        <el-table-column label="合同编号" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.contractCode:''}}</template>
        </el-table-column>
        <el-table-column label="佣金" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.deposit:''}}</template>
        </el-table-column>
        <el-table-column label="已收金额" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.incomeAmount:''}}</template>
        </el-table-column>
        <el-table-column label="剩余金额" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.surplusAmount:''}}</template>
        </el-table-column>
        <el-table-column label="履约状态" prop="">
          <template slot-scope="{row}">{{row.contractBO?row.contractBO.contractStatus:''}}</template>
        </el-table-column>
      </el-table>
      <BasePagination v-model="page" :total="totalCount" @change="pageOnChange" />
    </div>
    <!-- 列表区域 end -->

  </div>
</template>
<script>
import { deepClone } from '@/utils/util'
import { GETIMPORTCUSTOMER } from '@/api/customer'
import { SEXTYPELIST } from '@/common/constants'
export default {
  data() {
    return {
      searchForm: {},
      page: 1,
      pageSize: 100,
      dataList: [],
      totalCount: 0,
      SEXTYPELIST
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 分页切换事件
    pageOnChange(row) {
      this.page = row.page;
      if (row.pageSize) {
        this.pageSize = row.pageSize;
      }
      this.getList()
    },

    // 获取参数
    getParams() {
      const oParams = {}
      const o = deepClone(this.searchForm)
      const m = o.searchTime || ['2021-01-01', '2021-12-31']
      if (m && m.length > 0) {
        o.startDate = m[0]
        o.endDate = m[1]
      }
      delete o.searchTime
      oParams.size = this.pageSize
      oParams.paramObject = o
      return oParams
    },

    // 获取列表
    getList(current) {
      const oParams = this.getParams()
      oParams.page = current || this.page
      GETIMPORTCUSTOMER(oParams).then(res => {
        this.dataList = res.data || []
      })
    }

  }
}
</script>
<style lang="scss" scoped>
.all_into_page {
  padding: 20px;
  .show_tips {
    font-size: 14px;
    color: #666;
    line-height: 2;
    margin: 10px 0;
  }
}
</style>
